<template>
	<view>
		<view class="head">
			<navigator class="rule_box" :url="'/pages/index/time-limited-task/task-ranking/task-rule?id=' + id">任务规则</navigator>
			<view class="active_name ellipseHide">{{info.name}}</view>
			<view class="head_t">
				<text class="head_txt">我的排行</text>
				<text>{{info.rank==0?'暂未上榜':info.rank}}</text>
			</view>
			<view class="head_txt_two">
				<text v-if="type==2">合成数量：{{info.successNum}}</text>
				<text v-if="type==3">熔炼数量：{{info.successNum}}</text>
				<view class="go_invite" @click="jumpView">
					<text v-if="type==2">前往铸造所</text>
					<text v-if="type==3">前往熔炉</text>
					<image class="right_white" src="@/static/blindbox/jackpot/right_white.png" mode=""></image>
				</view>
			</view>
			<view class="head_txt_two">
				<text style="font-size: 26rpx;">活动时间：{{info.startTime}} - {{info.endTime}}</text>
			</view>
		</view>
		<view class="main">
			<view class="main_nav">
				<view class="main_nav_box" v-for="(nav,nIndex) in navList" :key="nIndex" @click="changeNav(nav,nIndex)">
					<text>{{nav.value}}</text>
					<view class="nav_line" v-if="changeIndex==nIndex"></view>
				</view>
			</view>
			<!-- 任务排行 -->
			<block v-if="changeIndex==0">
				<view class="main_box" v-for="(item,index) in list" :key="index">
					<view class="main_box_l">
						<image class="rank_img" v-if="index==0" src="@/static/blindbox/jackpot/first.png" mode=""></image>
						<image class="rank_img" v-else-if="index==1" src="@/static/blindbox/jackpot/second.png" mode="">
						</image>
						<image class="rank_img" v-else-if="index==2" src="@/static/blindbox/jackpot/third.png" mode="">
						</image>
						<text class="rank_num" v-else>{{index+1}}</text>
						<image class="avatar" :src="item.customerAvatar==''?'../../../../static/blindbox/avant_null.png':item.customerAvatar" mode="aspectFill"></image>
						<text class="phone">{{item.customerPhone}}</text>
					</view>
					<view class="main_box_r" v-if="type==2">
						合成数量：{{item.successNum}}
					</view>
					<view class="main_box_r" v-if="type==3">
						熔炼数量：{{item.successNum}}
					</view>
				</view>
				<view class="no_info" v-if="list.length==0">
					<image src="/static/my/order_no.png" mode="widthFix"></image>
					<text>暂无数据</text>
				</view>
			</block>
			<!-- 明细 -->
			<block v-if="changeIndex==1">
				<view class="task_detail" v-for="(item,dIndex) in dataList" :key="dIndex">
					<view class="task_detail_head">
						<view class="task_detail_head_l" v-if="type==2">合成成功</view>
						<view class="task_detail_head_l" v-if="type==3">熔炼成功</view>
						<view class="task_detail_head_r">编号：{{item.equityCardNo}}</view>
					</view>
					<view class="task_detail_center">{{item.equityCardName}}</view>
					<view class="task_detail_time">
						{{item.createTime}}
					</view>
				</view>
				<view class="no_info" v-if="dataList.length==0">
					<image src="/static/my/order_no.png" mode="widthFix"></image>
					<text>暂无数据</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		getH5LimitTaskInfo,
		taskH5RankList,
		limitTaskCastingList,
		limitTaskDestroyList,
	} from '@/api/timeLimitedTask.js'
	export default {
		data() {
			return {
				navList:[],
				navListOne:[
					{id:0,value:'任务排行'},{id:1,value:'合成明细'}
				],
				navListTwo:[
					{id:0,value:'任务排行'},{id:1,value:'熔炼明细'}
				],
				changeIndex: 0,
				token:'',
				id: '', //神椰限时任务id
				list: [], //排名列表
				info:{},
				pageNumber: 1,//当前页数
				pageSize: 10,//分页大小
				listTotal: 0,//列表总数
				dataList:[],
				type:"",// 1:限时打卡 2：限时合成 3：限时销毁
			}
		},
		onLoad(option) {
			this.token = uni.getStorageSync('token')
			this.id = option.id
			this.type = option.type
			this.getLimitTaskInfo()
			this.getList()
			if(this.type==2){ //合成
				this.navList = this.navListOne
				this.getTaskCastingList()
			}else{ //销毁
				this.navList = this.navListTwo
				this.getTaskDestroyList()
			}
		},
		onHide() {
			uni.removeStorageSync('person-card');
		},
		methods: {
			jumpView(){ //前往铸造所、熔炉
				if(this.type==2){ //铸造所
					uni.navigateTo({
						url:'/pages/syFactory/byCasting/byCasting'
					})
				}else{ //熔炉
					uni.navigateTo({
						url:'/pages/syFactory/meltinPot/meltinPot'
					})
				}
			},
			changeNav(item,index){ //nav类型切换
				this.changeIndex = index
				this.pageNumber = 1
				if(index==0){
					this.getList()
				}else{ //明细
					if(this.type==2){ //合成明细
						this.getTaskCastingList()
					}else{ //熔炉明细
						this.getTaskDestroyList()
					}
				}
			},
			async getLimitTaskInfo() { //获取我的排名信息
				uni.showLoading()
				const res = await getH5LimitTaskInfo(this.id);
				uni.hideLoading()
				this.info = res.result;
			},
			async getList() { //任务排行列表
				uni.showLoading()
				let data = {
					limitTaskId: this.id
				}
				const res = await taskH5RankList(data);
				uni.hideLoading()
				this.list = res.result;
			},
			async getTaskCastingList() { //合成明细
				uni.showLoading()
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNumber,
					limitTaskId: this.id
				}
				try {
					const res = await limitTaskCastingList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNumber > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			async getTaskDestroyList() { //熔炉明细
				uni.showLoading()
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNumber,
					limitTaskId: this.id
				}
				try {
					const res = await limitTaskDestroyList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNumber > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
		},
		//页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNumber, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNumber >= Math.ceil(this.listTotal / this.pageSize)) {
				console.log('没有分页')
				// this.lodingtype = 1
			} else {
				this.pageNumber++; //每触底一次 page + 1;
				if(this.type==2){ //合成明细
					this.getTaskCastingList()
				}else{ //熔炉明细
					this.getTaskDestroyList()
				}
			}
		},
		
	}
</script>

<style>
	view {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		height: 402rpx;
		background: linear-gradient(180deg, #069AFC 0%, #55D2CD 93.62%);
		padding: 40rpx 50rpx 110rpx;
	}
	.rule_box{
		width: 114rpx;
		height: 48rpx;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		background: rgba(0, 34, 99, .5);
		text-align: center;
		line-height: 48rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		position: absolute;
		right: 0;
		top: 40rpx;
	}
	.active_name{
		font-size: 34rpx;
		color: #FFFFFF;
		width: 490rpx;
		margin-bottom: 24rpx;
	}
	.head_t {
		color: #fff;
		font-size: 44rpx;
		margin-bottom: 12rpx;
		/* font-weight: bold; */
	}

	.head_txt {
		font-size: 30rpx;
		color: #FFFFFF;
		margin-right: 22rpx;
	}
	.head_txt_two{
		font-size: 30rpx;
		color: #FFFFFF;
		margin-right: 22rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.go_invite{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
		width: 172rpx;
		height: 44rpx;
		border-radius: 100rpx;
		border: 2rpx solid #fff;
		margin-left: 22rpx;
	}
	.right_white{
		width: 11rpx;
		height: 14rpx;
		margin-left: 6rpx;
	}

	.main {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -80rpx;
		padding-bottom: 100rpx;
	}
	.main_nav{
		display: flex;
		padding: 40rpx 0 34rpx;
	}
	.main_nav_box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		color: #222222;
		position: relative;
		height: 68rpx;
		width: 50%;
		font-weight: bold;
	}
	.nav_line{
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 20rpx;
		width: 60rpx;
		height: 6rpx;
		position: absolute;
		bottom: 0;
	}
	.main_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 26rpx 0rpx;
		margin: 0 40rpx;
		border-bottom: 2rpx solid #E1E1E1;
	}
	.main_box:last-child{
		border-bottom: 0;
	}

	.rank_img {
		width: 39rpx;
		height: 46rpx;
	}

	.main_box_l {
		display: flex;
		align-items: center;
	}

	.rank_num {
		font-size: 30rpx;
		color: #222222;
		/* font-weight: 600; */
		width: 39rpx;
		height: 46rpx;
		text-align: center;
		line-height: 46rpx;
	}

	.phone {
		font-size: 32rpx;
		color: #222222;
		/* font-weight: 600; */
	}

	.avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin: 0 24rpx;
	}

	.main_box_r {
		font-size: 30rpx;
		color: #222222;
	}
	.task_detail{
		padding: 30rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx #EAEAEA;
		margin: 26rpx 30rpx 4rpx;
	}
	.task_detail:first-child{
		margin: 40rpx 30rpx 30rpx;
	}
	.task_detail_head{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.task_detail_head_l{
		font-size: 32rpx;
		color: #222222;
		font-weight: bold;
	}
	.task_detail_head_r{
		color: #222222;
		font-size: 30rpx;
	}
	.task_detail_center{
		font-size: 28rpx;
		color: #222222;
		margin: 20rpx 0 6rpx;
	}
	.task_detail_time{
		font-size: 26rpx;
		color: #999999;
	}
	.no_info{
		padding-top: 200rpx;
	}
</style>
